<template>
  <div style="width: 100%">
    <el-table
      class="customer-table"
      :data="tableData"
      :border="false"
      size="small"
      style="width: 100%"
    >
      <el-table-column
        v-if="showIndex"
        type="index"
        align="center"
        label="序号"
      >
      </el-table-column
      >>
      <el-table-column
        align="center"
        :label="item.label"
        v-for="(item, index) in columnConfig"
        :key="index"
      >
        <template slot-scope="scope">
          <el-input
            v-if="item.type === 'input'"
            v-model="scope.row[item.name]"
          ></el-input>
          <div v-else-if="item.type === 'label'">
            {{ scope.row[item.name] }}
          </div>
          <el-input
            type="textarea"
            autosize
            v-else-if="item.type === 'textarea'"
            v-model="scope.row[item.name]"
          ></el-input>
          <el-select
            v-model="scope.row[item.name]"
            v-else-if="item.type === 'select'"
            placeholder="请选择"
          >
            <el-option
              v-for="item in item.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-radio-group
            v-else-if="item.type === 'radio'"
            v-model="scope.row[item.name]"
            placeholder="请选择"
          >
            <el-radio
              v-for="item in item.options"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
          <el-input v-else v-model="scope.row[item.name]"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="dataSource"
        width="80"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-button
            v-if="addAndDelete.toLowerCase().includes('delete')"
            icon="el-icon-minus"
            @click="handleDelete(scope.row.index)"
            type="primary"
            size="small"
          ></el-button>
        </template>
        　　　</el-table-column
      >
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
    }
  },
  props: {
    columnConfig: Array,
    addAndDelete: String,
    initData: Array,
    showIndex: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    this.tableData = this.initData.map((item, index) => {
      return { ...item, index }
    })
  },
  computed: {
    showAdd () {
      return this.addAndDelete.toLowerCase().includes('add')
    }
  },
  watch: {
    tableData: {
      deep: true,
      handler: function (val) {
        this.$emit("handleTableData", val)
      }
    },
  },
  methods: {
    handleDelete (index1) {
      this.tableData.splice(index1, 1)
      this.tableData = this.tableData.map((item, index) => {
        return { ...item, index: index }
      })
    },
    renderHeader () {
      if (this.showAdd) {
        return (
          <div>
            <el-button v-if={() => this.showAdd} icon="el-icon-plus" size="small" type='primary' onClick={() => this.handleAddItem()}></el-button>
          </div>
        )
      }
      return (
        <div>
        </div>
      )
    },
    handleAddItem () {
      this.tableData.push({
        index: this.tableData.length
      })
    }
  }
}
</script>
<style >
/* // 去掉表格单元格边框 */
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
/* // 表格最外边框 */
.el-table--border,
.el-table--group {
  border: none;
}
/* // 头部边框 */
.customer-table thead tr th.is-leaf {
  border: none;
  border-right: none;
  background: #f1f4f6;
}
.customer-table thead tr th:nth-last-of-type(2) {
  border-right: none;
}
/* // 表格最外层边框-底部边框 */
.el-table--border::after,
.el-table--group::after {
  width: 0;
}
.customer-table::before {
  width: 0;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
  width: 0;
}
/* // 表格有滚动时表格头边框 */
.el-table--border th.gutter:last-of-type {
  border: 1px solid #ebeef5;
  border-left: none;
}
</style>